<template>
	<div class="mainViewBig" v-bind:style="style">
		<!--头部-->
		<div class="headerTop headerTop2">
            <img src="@/assets/back_manage_img/scrw_1.png" alt="">
			<h1 class="header-title">{{dutyMap.dutyDay}} {{dutyMap.whiteDay}} 【<span>{{ nowList.name }}</span>】 包装生产任务
				<span style="font-size: 30px;">{{ changeTime }}s</span>
			</h1>
			<div class="TimeForm">
				<div>
					<p class="date">{{ nowDate }} {{ nowWeek }} </p>
					<p class="date">{{ nowTime }}</p>
				</div>
            </div>
		</div>
		<div class="large-board">
			<table>
                <tr>								
                    <th width="5%">设备号</th>
                    <th width="5%">计划类型</th>
                    <th width="18%">计划名称</th>
                    <th width="20%">规格</th>
                    <th width="7">单件(万支)</th>
                    <th width="7%">计划(万支)</th>
                    <th width="8%">设备状态</th>
                    <th width="20%">操作工</th>
                    <th width="10%">备注</th>
                </tr>
                <tr v-for="(item,index) in nowList.tableList" :key="index" >
                    <th>{{ item.deviceCode }}</th>
                    <th>{{ item.planTypeCn }}</th>
                    <th>{{ item.planName }}</th>
                    <th>{{ item.gradeValue }}</th>
                    <th>{{ item.thNumber }}</th>
                    <th>{{ item.totalNum }}</th>
					<th>
						<p class="aa_tag_inline"
						   :class="{'green': item.productStatus === '2', 'yellow': item.productStatus === '1', 'grey': item.productStatus === '0'}">
							{{ item.productStatusCn }}
						</p>
					</th>
                    <th>{{ item.operateUserName }}</th>
                    <th>{{ item.remark }}</th>
                </tr>
            </table>
		</div>
	</div>
</template>

<script>
import "./bigScreen.scss";
import resize from "../resize";

export default {
    name: "bigScreen",
    data() {
        return {
            style: {}, //缩放样式
            nowTime: "",
            nowDate: "",
            nowWeek: "",
            nowList: {},
            list: [],
            interval1: null,
			changeTime:20,
			dutyMap:{dutyDay:'',whiteDay:''}
        };
    },
    methods: {
        pageShow() {//页面初始宽高显示 和 页面大小改变监听
            this.style = resize.setScale();
            window.onresize = () => {
                this.style = resize.setScale();
            };
        },
        changeList() {
            let self = this;
            let page = 0;
            if(self.list.length == 0){
            	return;
			}
            self.nowList = self.list[page];
            if(self.interval1){
                clearInterval(self.interval1);
            }
			self.intervalTime()
            self.interval1 = setInterval(function(){
                page++;
                self.nowList = self.list[page];
                if(page == self.list.length){
                    page = 0
                }
                self.nowList = self.list[page]
				self.intervalTime()
            },1000*20)
        },
		intervalTime() {
			let self = this;
			self.changeTime = 20;
            if(self.interval2){
                clearInterval(self.interval2);
            }
            self.interval2 = setInterval(function(){
				if (self.changeTime > 0) {
					self.changeTime -= 1;
				} else {
					clearInterval(self.interval2);
				}
            },1000)
		},
        getdateFormat() {//显示时间
            var _this = this;
            let wk = new Date().getDay();
            let yy = String(new Date().getFullYear());
            let mm = new Date().getMonth() + 1;
            let dd = String(new Date().getDate() < 10 ? "0" + new Date().getDate() : new Date().getDate());
            let hou = String(new Date().getHours() < 10 ? "0" + new Date().getHours() : new Date().getHours());
            let min = String(new Date().getMinutes() < 10 ? "0" + new Date().getMinutes() : new Date().getMinutes());
            let sec = String(new Date().getSeconds() < 10 ? "0" + new Date().getSeconds() : new Date().getSeconds());
            let weeks = ["周日", "周一", "周二", "周三", "周四", "周五", "周六",];
            let week = weeks[wk];
            _this.nowTime = hou + ":" + min + ":" + sec;
            _this.nowDate = yy + "." + mm + "." + dd;
            _this.nowWeek = week;
        },

		getOnDutyProductList() {
			let self = this;
			self.$http({
				url: "/jinl/firstPage/getOnDutyProductList",
				method: "post",
				params:{notToken:true}
			}).then(resp => {
				if (resp.success) {
					self.list = [];
					for(let key in resp.result){
						let tableDatas = {name:key,tableList:[]};
						for(let data of resp.result[key]){
							data.id = data.id||'';
							data.itemTypeId = data.itemTypeId||'';
							data.deviceCode = data.deviceCode||'';
							data.planId = data.planId||'';
							data.planType = data.planType||'';
							data.planTypeCn = data.planTypeCn||'';
							data.planCode = data.planCode||'';
							data.planName = data.planName||'';
							data.gradeValue = data.gradeValue||'';
							data.thNumber = data.thNumber||'';
							data.peieceNum = data.peieceNum||'';
							data.totalNum = data.totalNum||'';
							data.productStatus = data.productStatus||'0';
							data.productStatusCn = data.productStatusCn||'空置';
							data.operateUserName = data.operateUserName||'';
							data.remark = data.remark||'';
							data.whiteDay = data.whiteDay||'';
							data.dutyDay = data.dutyDay||'';
							tableDatas.tableList.push(data);
						}
						self.list.push(tableDatas);
					}
					console.log(self.list)
					self.changeList();

				}
			});
		}
    },
    mounted() {
        let self = this;
        setInterval(() => {
            self.getdateFormat();
        }, 1000);
        self.pageShow();
        self.getOnDutyProductList();
		setInterval(() => {
			self.getOnDutyProductList();
		}, 1000 * 80);

    },
};
</script>

<style scoped>
</style>
